
<template>
  <Page>
        <Card :title="page_name">
            <div class="flex flex-col gap-4" style="padding:20px">
                <!-- 页面操作栏 -->
                <div class="flex justify-between items-center mb-4">
                <h2 class="text-lg font-semibold"></h2>
                <button
                    class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
                    @click="previewPage"
                >
                    Preview Page
                </button>
                </div>

                

                <!-- 模块列表 -->
                <div
                v-for="module in modules"
                :key="module.id"
                class="border rounded shadow p-4 bg-white"
                >
                <div
                    class="flex justify-between items-center cursor-pointer bg-gray-100 hover:bg-gray-100 p-2"
                    @click="toggleModule(module.id)"
                >
                    <span class="font-semibold">{{ module.name }}</span>
                    <span>{{ activeModuleId === module.id ? '▲' : '▼' }}</span>
                </div>

                <div v-if="activeModuleId === module.id " class="mt-2 border-t pt-2">
                    <component v-if="module.is_out==0" :is="moduleMap[module.id]" />
                    <div v-else>
                       {{module.description}}
                       <Button @click="goto(module)">To Update</Button>
                    </div>
                </div>
                </div>
            </div>
        </Card>
  </Page>
</template>






<script lang="ts" setup>
import { ref, defineAsyncComponent, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { Themefilemodel } from '#/api/admin/themefile';
import { Page } from '@vben/common-ui';
//@click="toggleModule(module.id)"
import { Button } from 'ant-design-vue';
const router = useRouter();
const route = useRoute();
const themefile_id = Number(route.params.id || 0);
const goto= function(module){
    router.push({
      path: module.url,

    });
}
const baseUrl = import.meta.env.VITE_GLOB_API_URL
const previewPage=()=>{
  if(page.value.href==null)page.value.href='';
  window.open(baseUrl+''+page.value.href)
}
const modules = ref<{ id: number; name: string; url: string }[]>([]);
const moduleMap: Record<number, any> = {};
const activeModuleId = ref<number | null>(null);

// 切换显示模块
function toggleModule(id: number) {
  activeModuleId.value = activeModuleId.value === id ? null : id;
}
const page_name = ref();
const page =ref();
onMounted(async () => {
  if (!themefile_id) return;

  try {
    const res = await Themefilemodel({ id: themefile_id });
    if (res.code !== 1) return;

    modules.value = res.data.data;
    page_name.value = res.data.page.name;
    page.value= res.data.page;

    // 根据 url 动态加载组件
    modules.value.forEach(item => {
      // url: "/home/vechile" => "@/views/portal/vechile/index.vue"
      const componentPath = item.url;
     
      moduleMap[item.id] = defineAsyncComponent(() =>
        import(`/src/views${componentPath}/index.vue`)
      );
    });
  } catch (err) {
    console.error('获取模块失败', err);
  }
});
</script>
